<style>
.many2one-input {
    border: 1px solid #cccccc;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
    width: 100%;
    padding-left: 35px !important;
    padding-top: 6px !important;
    font-size: 18px !important;
    height: 32px !important;
}

.many2one-input:hover {
    background-color: #F7F7F7 !important;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}

.many2one-list {
    background-color: #eee;
    height: inherit;
    /*position: absolute;*/
    width: 100%;
    z-index: 10;
    max-height: 300px;
    overflow-y: auto;
    /*opacity: .9;*/
}

.many2one-list-item {
    background-color: #eee;
    border-bottom: 1px solid white;
    padding: 8px 12px;
    margin: 0 !important;
}

.many2one-list-item.choosed {
    background-color: #3F51B5;
    color: white;
}

.many2one-list-item:last-child {
    border-bottom: 0;
}

.many2one-display-icon {
    display: inline-block;
    position: absolute;
    height: 32px;
    left: 6px;
    border-right: 1px solid #cccccc;
    padding: 6px 6px 1px 1px;
}

.many2one-display-name {

}

.many2one-component:hover .many2one-display-name {
    opacity: 0;
}

.many2one-display-name {
    transition: opacity .3s ease;
    display: inline-block;
    position: absolute;
    height: 32px;
    right: 0;
    top: 0;
    border-left: 1px solid #cccccc;
    padding: 6px;
    color: #9E9E9E;
}

.many2one-icon-right {
    background: url('../assets/shop.png') no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 16px 16px;
    transition: transform .3s ease;
}
.many2one-icon-bottom {
    transform: rotate(90deg);
}

</style>

<template>
    <div class='many2one-component'>
        <div class="many2one-display-icon">
            <a class="many2one-icon-right" :class="{'many2one-icon-bottom': is_display_record }" @mousedown.prevent.stop="display_record" ></a>
        </div>
        <input @keydown.up.prevent="up_index" @keydown.down.prevent="down_index" @blur="blur_input" @keydown.enter.prevent="enter_input" class="many2one-input" v-model="model.record.value" type="text" :placeholder="model.record.placeholder || '请选择记录'" @input="input_change"/>
        <div class="many2one-display-name">
            {{ model.record.name }}
        </div>
    </div>
    <ul class="many2one-list" v-show="is_display_record" transition="expand">
        <li @mouseover="over_item($index)" :class="{choosed: choose_index === $index}" v-for="record in records" @click.stop.prevent="choose_record(record)" class="many2one-list-item">
            {{record.value}}
        </li>
    </ul>
</template>

<script>
    var $ = require('jquery');
    import Vue from 'Vue'

    export default {
        props: ['model', 'index', 'config'],
        data: function() {
            return {
                original_value: this.model.record.value,
                is_display_record: false,
                records: [],
                choose_index: 0,
            };
        },
        methods: {
            up_index: function(env) {
                if (env.shiftKey) {
                    this.$dispatch('prev-textarea', this.index);
                } else if (this.choose_index > 0) {
                    this.choose_index -= 1;
                }
            },
            down_index: function(env) {
                if (env.shiftKey) {
                    this.$dispatch('next-textarea', this.index);
                } else if (!this.is_display_record) {
                    this.is_display_record = true;
                    this.get_records();
                } else if (this.choose_index < this.records.length - 1) {
                    this.choose_index += 1;
                }
            },
            over_item: function(index) {
                if (this.choose_index != index) {
                    this.choose_index = index;
                }
            },
            input_change: function() {
                if (this.model.record.value) {
                    this.is_display_record = true;
                    this.get_records();
                } else {
                    this.is_display_record = false;
                }
            },
            get_records: function() {
                var self = this;
                $.when($.get('/editor/many2one/search', {
                    shop_id: self.config.osv.shop_id,
                    word: self.model.record.value,
                    model: self.model.record.model,
                    domain: self.model.record.domain,
                })).then(function(results) {
                    self.records = JSON.parse(results);
                }, function() {
                    console.log(arguments);
                });
            },

            blur_input: function() {
                this.is_display_record = false;
                if (!this.model.record.model_id) {
                    this.model.record.value = '';
                } else if (!this.model.record.value) {
                    this.model.record.model_id = 0;
                    this.$dispatch('text-input-change');
                } else if (this.original_value) {
                    this.model.record.value = this.original_value;
                }
            },

            display_record: function() {
                $(this.$el.parentNode).find('.many2one-input').focus();
                if (this.is_display_record) {
                    this.is_display_record = false;
                } else {
                    this.is_display_record = true;
                    this.get_records();
                }
            },

            enter_input: function(env) {
                if (env.shiftKey) {
                    this.$dispatch('add-text', this.index);
                } else if (this.records && this.choose_index >= 0 && this.choose_index < this.records.length) {
                    this.choose_record(this.records[this.choose_index]);
                }
            },

            choose_record: function(record) {
                this.model.record.value = record.value;
                this.model.record.model_id = record.id;
                this.original_value = record.value;

                this.is_display_record = false;
                Vue.nextTick(function() {
                    this.choose_index = 0;
                })
                this.$dispatch('text-input-change');
            },
        },
    }
</script>
